<template>
  <div ref="echarts-bar" :style="{height:height}" />
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'EchartsTwoBarLine',
  /*
    projectTotal   项目总数
    actualArr 施工中项目
    contract 合同总金额
  */
  props: {
    xDataArr: {
      type: Array,
      default: () => []
    },
    actualArr: {
      type: Array,
      default: () => []
    },
    projectTotal: {
      type: Array,
      default: () => []
    },
    contract: {
      type: Array,
      default: () => []
    },
    height: {
      type: String,
      default() {
        return '210px'
      }
    },
    xAxisName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      echarts: null
    }
  },
  watch: {
    xDataArr(values) {
      if (values && values.length) {
        this.InitEcharts()
      }
    }
  },
  mounted() {
    this.InitEcharts()
  },
  beforeDestroy() { // 清理工作 避免内存泄漏
    window.removeEventListener('resize', this.resizeHandler)
    this.echarts && this.echarts.dispose()
  },
  methods: {
    // 初始化图形
    InitEcharts() {
      if (!this.xDataArr.length) {
        for (let i = 0; i < 12; i++) {
          this.xDataArr.push(i + 1 + '月')
          this.actualArr.push(0)
          this.projectTotal.push(0)
          this.contract.push(0)
        }
      }
      const options = {
        tooltip: {
          trigger: 'axis',
          position: 'right',
          axisPointer: {
            type: 'shadow'
          }
          // formatter: (params) => {
          //   const format = `
          //     ${params[0].seriesName}：${params[0].value}
          //     <br/>
          //     ${params[1].seriesName}：${params[1].value}
          //     <br/>
          //     ${params[2].seriesName}：${this.divideMoney(params[2].value, 6, true)}万元
          //     <br/>
          //   `
          //   return format
          // }

        },
        legend: {
          top: 10,
          icon: 'circle',
          data: ['施工中项目数', '项目总数', '合同总金额'],
          textStyle: {
            color: '#6AA4F5'
          }
        },
        grid: {
          bottom: 25,
          right: '20%'
        },
        xAxis: {
          name: this.xAxisName,
          type: 'category',
          nameTextStyle: {
            color: '#fff',
            padding: [25, 0, 0, -10]
          },
          data: this.xDataArr,
          axisLabel: {
            color: '#fff',
            fontSize: 12
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#12fffe',
              width: 1,
              type: 'solid'
            }
          }
        },
        yAxis: [
          {
            name: '(个)',
            type: 'value',
            minInterval: 1,
            min: 0,
            max: 5,
            nameTextStyle: {
              color: '#fff'
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#eee',
              fontSize: 12
            },
            splitLine: {
              lineStyle: {
                color: ['#12fffe'],
                type: 'dotted'
              }
            }
          },
          {
            name: '(万元)',
            type: 'value',
            nameTextStyle: {
              color: '#fff'
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              color: '#eee',
              fontSize: 12
              // formatter: v => parseInt(v / 10000)
            },

            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            }

          }
        ],
        series: [
          {
            name: '项目总数',
            data: this.projectTotal,
            type: 'bar',
            barWidth: '6px',
            itemStyle: {
              color: '#00ffe6',
              barBorderRadius: [180]
            },
            yAxisIndex: 0
          },
          {
            name: '施工中项目数',
            data: this.actualArr,
            type: 'bar',
            showBackground: false,
            barWidth: '6px',
            itemStyle: {
              color: '#007AFF',
              barBorderRadius: [180]
            },
            yAxisIndex: 0
          },
          {
            name: '合同总金额',
            data: this.contract,
            type: 'line',
            symbolSize: 6,
            symbol: 'circle',
            itemStyle: {
              color: 'rgb(255,237,8)', // 折线点的颜色
              lineStyle: {
                color: 'rgb(255,237,8)' // 折线的颜色
              }
            },

            yAxisIndex: 1
          }
        ]
      }
      this.echarts = echarts.init(this.$refs['echarts-bar'])
      this.echarts.setOption(options)
      // 绑定监听事件
      window.addEventListener('resize', this.resizeHandler)
    },
    resizeHandler() {
      this.echarts.resize()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
